<script setup>
import { Local } from "../../utils/storage";

const playlist = Local.get("dayMusic");
</script>

<template>
  <div class="day_music">
    <div class="title">每日歌曲推荐</div>
    <div class="tip">根据你的音乐口味生成·每天6:00更新</div>
    <div class="list">
        <el-scrollbar height="100%">
            <music-list listInfo="" :songs="playlist"></music-list>
        </el-scrollbar>
    </div>
  </div>
</template>

<style scoped lang="scss">
.day_music {
  //   padding: 0 9.5rem;
  padding: 0 20px;
  height: calc(100% - 30px);
  .list{
    height: calc(100% - 100px);
  }
  .title {
    font-size: 50px;
    font-weight: 600;
    color: #e94057;
    text-align: center;
    margin-top: 30px;
    animation: title 1.5s forwards;
  }
  .tip {
    font-size: 16px;
    text-align: center;
    padding: 16px 0;
    animation: tip 1.5s forwards;
  }
  @keyframes title {
    0% {
      // letter-spacing: 0px;
    }
    100% {
      letter-spacing: 8px;
    }
  }
  @keyframes tip {
    0% {
      // letter-spacing: 0px;
    }
    100% {
      letter-spacing: 2px;
    }
  }
}
</style>
